<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		
		
		
	</head>
	<body>
		
		<div class="battleground">
			<div class="plant"></div>
		</div>
		<div class="gameOver">
			游戏结束，你太菜了~~~
			<button><a href="index.html">再来一次</a></button>
		</div>
		
		<div class="win">
			恭喜，你赢了！！！
			<button><a href="index.html">再来一次</a></button>
		</div>
		
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript">
			var startLeft=$(window).width()/2;
			var startTop=$(window).height()/2;

			var clientWidth=$(window).width();
			var clientHeight=$(window).height();
			var clientWF=parseFloat(clientWidth);
			var clientHF=parseFloat(clientHeight);
			var sumY=0;
			var sumX=0;
//			飞机移动距离
			var moveLong=40;
//			从0开始往上的限制步数
			var topComNum=parseInt(startTop/moveLong);
//			从0开始往左的限制步数
			var leftComNum=parseInt(startLeft/moveLong);
			$(".plant").css("left",startLeft);
			$(".plant").css("top",startTop);
			$(window).on("keydown",function(e){
				var top = $(".plant").css("top");
//				按键移动

//				显示游戏结束时不能移动
				
				if($(".gameOver").css("display")=="none"){
					keyPre(e);
				}
					
				
				
				
//				边界问题
				boundary();
			})
			
			function boundary(){
					if(sumY>topComNum*40){
						$(".plant").css("top","0px");
						sumY=topComNum*40;
						
					}
					if(sumY<-(topComNum-1)*40){
						$(".plant").css("top",parseFloat(clientHeight)-50+"px");
	//					$(".plant").css("top",clientWidth);
						sumY=-(topComNum-1)*40;
						
					}
					if(sumX>leftComNum*40){
						$(".plant").css("left","0px");
						sumX=leftComNum*40;
						
					}
					if(sumX<-(leftComNum-1)*40){
						$(".plant").css("left",parseFloat(clientWidth)-50+"px");
	//					$(".plant").css("top",clientWidth);
						sumX=-(leftComNum-1)*40;
						
					}
				}
				
				function keyPre(e){
					//				上
					if(e.keyCode==87){
						sumY=sumY+moveLong;
						$(".plant").css("top",parseInt(startTop)-sumY)
					}
	//				下
					if(e.keyCode==83){
						sumY=sumY-moveLong;
	//					$(".plant").css("transform","translateY("+sum+"%)")
						$(".plant").css("top",parseInt(startTop)-sumY)
					}
	//				左
					if(e.keyCode==65){
						sumX=sumX+moveLong;
						$(".plant").css("left",parseInt(startLeft)-sumX)
					}
	//				右
					if(e.keyCode==68){
						sumX=sumX-moveLong;
						$(".plant").css("left",parseInt(startLeft)-sumX)
					}
//					生成子弹
					if(e.keyCode==32){
//						生成子弹
						var ammo=document.createElement("div");
						$(ammo).addClass("ammo");
						$(ammo).css("top",parseFloat($(".plant").css("top"))-40+"px");
						$(ammo).css("left",parseFloat($(".plant").css("left"))+10+"px");
						$(".battleground").append(ammo);
//						发射子弹
						var timmer = setInterval(function(){
							if(parseFloat($(ammo).css("top"))<=-30){
//								console.log("no")
//								$(".battleground").remove(ammo);
								ammo=null;
								clearInterval(timmer);
							}else{
								$(ammo).css("top",parseFloat($(ammo).css("top"))-40+"px");
							}
							
						},50)
						
						
						
						
//						检验子弹的碰撞
						ammoCrash();
						
						
						
						
						
						function ammoCrash(){
							var allPlanet = document.querySelectorAll(".planet");
//							console.log($(allPlanet).length);
								setInterval(function(){
//									每个子弹都和子弹进行检测
									allPlanet.forEach(function(a,index){
										if(parseFloat($(ammo).css("top"))>-30){
	//										获取子弹左上角的坐标
											var ammoTop = parseFloat($(ammo).css("top"));
											var ammoLeft = parseFloat($(ammo).css("left"));
											var pTop = parseFloat($(allPlanet[index]).css("top"));
											var pLeft = parseFloat($(allPlanet[index]).css("left"));
											if((pTop-ammoTop<=40)&&(ammoTop-pTop<=100)&&(pLeft-ammoLeft<=20)&&(ammoLeft-pLeft<=100)){
												console.log("ammo");
												$(ammo).remove();
												$(allPlanet[index]).remove();
												ammo=null;
												if($(allPlanet).length==1){
													$(".win").css("display","block");
												}
											}
										}
										
									})
								},50)

							
						}
						
						
						
						
					}
					console.log(e.keyCode);
				}
				
				planetCreate();
				
				
//				随机生成小行星
				function planetCreate(){
//					var disX=10*Math.random()-5;
//					var disY=10*Math.random()-5;
					
					var planet = document.createElement("div"); 
					
//					planet.classList.add("planet");
					$(planet).addClass("planet");
//					$(".battleground").append(planet);
					var planets=[];
					
//					setInterval(function(){
//						if(parseFloat($(planet).css("top"))<0){
//							disY=-disY;
//						}
//						if(parseFloat($(planet).css("top"))>clientHeight-55){
//							disY=-disY;
//						}
//						if(parseFloat($(planet).css("left"))<0){
//							disX=-disX;
//						}
//						if(parseFloat($(planet).css("left"))>clientWidth-55){
//							disX=-disX;
//						}
//						$(planet).css("top",parseFloat($(planet).css("top"))+disY+"px");
//						$(planet).css("left",parseFloat($(planet).css("left"))+disX+"px");
//						
//					},50);
					
					
					
//					随机生成10个小行星
					for(let i=0;i<20;i++){
						
						planets[i] = document.createElement("div");
						planets[i].classList.add("planet");
						$(planets[i]).css("top",(clientHF-110)*Math.random()+"px");
						$(planets[i]).css("left",(clientWF-110)*Math.random()+"px");
						var planetsTopNum=parseFloat($(planets[i]).css("top"));
						var planetsLeftNum=parseFloat($(planets[i]).css("left"));
						if(planetsTopNum>(clientHF/2-100)&&(planetsTopNum<(clientHF/2+160))&&planetsLeftNum>(clientWF/2-100)&&(planetsLeftNum<(clientWF/2+160))){
							planets.splice(i,1);
							console.log("yes");
						}
					}
					planets.forEach(function(a,index){
//						速度
							var disX=20*Math.random()-10;
							var disY=20*Math.random()-10;
							
							$(".battleground").append(planets[index]);
						setInterval(function(){
							if(parseFloat($(planets[index]).css("top")+10)<0){
								disY=-disY;
							}
							if(parseFloat($(planets[index]).css("top"))>clientHeight-110){
								disY=-disY;
							}
							if(parseFloat($(planets[index]).css("left")+10)<0){
								disX=-disX;
							}
							if(parseFloat($(planets[index]).css("left"))>clientWidth-110){
								disX=-disX;
							}
							$(planets[index]).css("top",parseFloat($(planets[index]).css("top"))+disY);
							$(planets[index]).css("left",parseFloat($(planets[index]).css("left"))+disX);
							
						},30)
						
						
					})
//					for(let j=0;j<planets.length;j++){
//						$(".battleground").append(planets[j]);
//					}
				
					
				
				//				行星和飞船碰撞
					var time = setInterval(function(){
						var planets = document.querySelectorAll(".planet");
						var plantTop=parseFloat($(".plant").css("top"));
						
						var plantLeft=parseFloat($(".plant").css("left"));
						planets.forEach(function(a,index){
							var planetsTop=parseFloat($(planets[index]).css("top"));
							var planetsLeft=parseFloat($(planets[index]).css("left"));
							if((planetsTop-plantTop<=40)&&(plantTop-planetsTop<=100)&&(planetsLeft-plantLeft<=40)&&(plantLeft-planetsLeft<=100)){
								console.log("yep");
								$(".gameOver").css("display","block");
							}
						})
					},30) 

				}
				

				
			
		</script>
		
		
	</body>
</html>
